<template>
  <span class="checkInput" @click="checkAoiType" :class="{'check':info.isCheck}">
    <span class="index-text">{{index+1}}.</span>
    <div @click.stop="yCheckAoiType">
      <el-input v-model="info.value" style="width: 100px;margin-right: 20px;" ></el-input>
    </div>
    <span class="label-text">{{info.name}}</span>

    <span style="width: 20px;margin-left: 10px" @click.stop="noCheckAoiType">
      <i class="el-icon-close" style="color: #409eff;font-size: 20px" v-if="info.isCheck" ></i>
    </span>

  </span>
</template>
<script>

  // import Request from '@/common/js/Request'

  export default {
    data() {
      return {
      }
    },
    props:['info','index'],
    created: function () {

    },
    methods: {
      checkAoiType(){
        this.info.isCheck = !this.info.isCheck
        this.$forceUpdate()
      },
      yCheckAoiType(){
        this.info.isCheck = true
        this.$forceUpdate()
      },
      noCheckAoiType(){
        if(this.info.value){
          return
        }
        this.info.isCheck = false
        this.$forceUpdate()
      },
    }
  }

</script>

<style>

  .checkInput{
    display: flex;
    align-items: center;
  }

  .index-text{
    width: 20px;
  }
  .index-text,.label-text{
    margin-right: 10px;
  }
  .check .label-text{
    color:#409eff;
  }

  .check .el-input__inner{
    border-color: #409eff;
  }

</style>
